<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>代码库</title>
<link rel="stylesheet" href="./css/reset.css"/>
<base target="_blank">
<style>
body{width:500px;margin:0px auto;padding:20px;font: 18px/1.95em "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;background:rgba(108,59,48,.8);}
#codelibrary{
	border:4px solid gray;
	border-radius:0 20px 20px 0;
	padding:20px;
	box-shadow:1px 1px gray,3px 3px white,5px 5px gray,7px 7px white,9px 9px gray,11px 11px white,13px 13px gray,15px 15px gray,1px 5px 50px rgba(0,0,0,.5);
}
#codelibrary>div{
	border:2px solid gray;
	border-radius:20px;
	padding:10px;
}
p{
	background:rgba(0,0,0,.3);
	padding:5px 0 0 10px;
	color:#0066CC;
	font-weight:bold;
}
div div{
	border-bottom:2px solid white;
	cursor:pointer;
}
div div:first-child p{border-radius:10px 10px 0 0;}
ul>li{padding:0px 5px;margin:5px 0;}
ul{display:none;}
li{background:#dedede;margin:1px;}
@keyframes font-animation{
from {color:yellow;font-weight:normal;}
to {color:white;font-weight:bold;}
}
li a{display:block;color:blue;}
li:hover{background:#AE4141;}
li:hover a:hover{color:white;font-weight:bold;text-decoration:underline;animation:font-animation 0.5s;}
</style>
<script>
window.onload=function(){
	var menu=document.getElementById('codelibrary'),
		ps=menu.getElementsByTagName('p'),
		uls=menu.getElementsByTagName('ul');
		for(var i in ps){
			ps[i].id=i;
			ps[i].onclick=function(){
				var ul=uls[this.id];
				ul.style.display =(ul.style.display == "none" )? "block" : "none";
				}
			}
	}
</script>
</head>
<body>
<section id="codelibrary">
	<div>
		<div>
			<p>布局</p>
			<ul>
				<li><a href="./codelibrary/layout/two-colomn-0.html">两列固定宽度布局</a><li>
				<li><a href="./codelibrary/layout/two-colomn-1.html">两列左侧自适应布局</a><li>
				<li><a href="./codelibrary/layout/two-colomn-2.html">两列右侧自适应布局</a><li>
				<li><a href="./codelibrary/layout/three-colomn-0.html">三列固定网页布局</a><li>
				<li><a href="./codelibrary/layout/three-colomn-1.html">三列左侧自适应布局</a><li>
				<li><a href="./codelibrary/layout/three-colomn-2.html">三列中间自适应布局</a><li>
				<li><a href="./codelibrary/layout/three-colomn-3.html">三列右侧自适应布局</a><li>
			</ul>
		</div>
		<div>
			<p>模块</p>
			<ul>
				<li><a href="./codelibrary/module/Nav/nav.html">导航栏</a><li>
				<li><a href="./codelibrary/module/SearchForm/searchform.html">搜索框</a><li>
				<li><a href="./codelibrary/module/Table/table-1.html">表格1</a><li>
				<li><a href="./codelibrary/module/Table/table-2.html">表格2</a><li>
				<li><a href="./codelibrary/module/PageNext/pagenext.html">翻页器</a><li>
				<li><a href="./codelibrary/module/DropMenu/drop.html">下拉伸缩菜单</a><li>
				<li><a href="./codelibrary/module/timeline.html">时间轴</a><li>
				<li><a href="./codelibrary/module/select.html">下拉列表</a><li>	
			</ul>
		</div>
		<div>
			<p>元件</p>
			<ul>
				<li><a href="./codelibrary/unit/Button/buttons.html">按钮</a><li>
				<li><a href="./codelibrary/unit/Ribbon/ribbons.html">丝带标签</a><li>
				<li><a href="./codelibrary/unit/SlideBar/slidebar.html">滑动条</a><li>
				<li><a href="./codelibrary/unit/ProgressBar/progressbar.html">进度条</a><li>				
			</ul>
		</div>
		<div>
			<p>图片</p>
			<ul>
				<li><a href="./codelibrary/picture/accordion/accordion.html">手风琴</a><li>
				<li><a href="./codelibrary/picture/PicBorder/picborders.html">利用border属性的各种图片框</a><li>
				<li><a href="./codelibrary/CSS3/cubephoto.html">立方体图片墙</a><li>
				<li><a href="./codelibrary/CSS3/photowall3d.html">旋转图片墙</a><li>	
			
			</ul>
		</div>
		<div>
		<p>项目实例</p>
			<ul>
				<li><a href="./codelibrary/ResponsiveWeb/index.html">响应式网站</a><li>
				<li><a href="./codelibrary/landsky/index.html">企业产品网站</a><li>
				<li><a href="./codelibrary/postcard/postcard.html">明信片</a><li>
				<li><a href="./codelibrary/HTML5/canvas-clock.html">时钟</a><li>
				<li><a href="./junyi/libang/index.html">理邦家具-1</a><li>
				<li><a href="http://lb-un.com/">理邦家具-2</a><li>
				<li><a href="http://lb-un.com/mobile.php">理邦家具-3</a><li>
				<li><a href="http://gzjyit.com/">骏易信息技术</a><li>
				<li><a href="./junyi/jiaoyun/index.html">轿运联盟</a><li>
				<li><a href="http://hdacer.win/">春秋美术</a><li>
			</ul>
		</div>
	</div>
</section>
</body>
</html>
